<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/bootstrap-3.4.1/dist/css/bootstrap.min.css">
</head>
<body>
    <div id="app">
        <table-com :data="gridData" :columns="gridColumns"></table-com>
    </div>
    <template id="temp">
        <div class="container">
            <table class="table table-bordered table-hover">
                <tr><th v-for="col in columns">{{col}}</th></tr>
                 <tr v-for="row in data"><td v-for="col in columns">{{row[col]}}</td></tr>
            </table>
        </div>
    </template>
    <script type="text/javaScript" charset="UTF-8" src="/JS文件/vue.js"></script>

    <script>
        Vue.component("table-com",{
            template:'#temp',
            props:{
                data:Array,
                columns:Array
                }
        })
        var vm = new Vue({
            el:'#app',
            data:{
            gridColumns:['课程','价格','描述'],
            gridData:[{
                课程:'Vue课程',
                价格:20.9,
                描述:'是一套用于构建用户界面等等渐进式框架。'
            },{
                课程:'javaScript课程',
                价格:200,
                描述:'是一种直译式语言，是一种动态类型，弱类型，基于原型的语言，内置支持类型。'
            },{
                课程:'HTML课程',
                价格:20.3,
                描述:'超文本标记语言(Hypeer Text Markup Language,HTML)。'
            },{
                课程:'java课程',
                价格:2000,
                描述:'是一门面向的对象编程的语言'
            }]
            }
        });
    </script>
</body>
</html>